<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--忽略页面中的邮箱格式为邮箱-->
    <meta name="format-detection" content="email=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no,address=no,email=no">
    <title>移动端创建活动模板</title>
    <link rel="stylesheet" href="../../css/activity_mobwx.css">
    <link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../../css/animate.min.css">
</head>
<body style="font-family: myFont">
<div class="datermine">
    <p class="mine_text">
        活动宣品信息确认无误后 <br>
        点击【确定】按钮，就可分享邀约啦
    </p>
    <ul class="mine_ul clearfix">
        <li>
            <a href="javascript:void (0);" class="sure_btn">确定</a>
        </li>
        <li>
            <a href="javascript:void (0);" class="sure_btn close_btn">关闭</a>
        </li>
    </ul>
</div>
<!--免费兑换朦层-->
<div class="freeexchange">
    <div class="exchange_share">
        <div class="exchange_con">
            <div class="exchange_title clearfix">
                <h3 class="title_h3 fl">免费兑换券</h3>
                <span class="fr title_span">12 张</span>
            </div>
            <div class="exchange_text">
                <p class="text_p">本次兑换将消耗一张免费兑换券，当前还剩 12 张</p>
                <span class="text_span">您确定使用免费兑换券吗？</span>
                <ul class="exchange_ul clearfix">
                    <li class="exchange_li think_li">不，再看看</li>
                    <li class="exchange_li sure_li">确 定</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="warp_creat">
    <!--背景色-->
    <div class="myswiper-container creat_page" style="background-color: #fff;">
        <audio style="display:none; height: 0" id="bg-music" preload="auto" src="../../music/动物园的小熊们.mp3" loop="loop"></audio>
        <div class="playBtn play">
            <img src="../../images/icon/music_play.png" alt="">
        </div>
        <!--返回按钮-->
        <div class="sendBtn">
            <img src="../../images/icon/send_icon.png" alt="">
        </div>
        <!--编辑按钮-->
        <div class="editBtn">
            <img src="../../images/icon/edit_img.png" alt="">
        </div>
        <div class="swiper-wrapper">
            <!--第一屏  首页-->
            <!--1、背景图-->
            <div class="swiper-slide pub_home swiper-lazy" data-background="../../images/template_mob/car_1/back1.png">
                <!--2、标题文字class="home_div"   加class="home_divwhite"；字体为白色-->
                <!--<div class="home_div ani" swiper-animate-effect="fadeInLeftBig" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">-->
                    <!--<p>不知道小年带孩子干嘛？</p>-->
                    <!--<p>快加入我们！</p>-->
                <!--</div>-->
                <!--3、标题背景图-->
                <img src="../../images/template_mob/car_1/title1.png" alt="" class="swiper-lazy note ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
                <!--4、渲染图-->
                <img src="../../images/template_mob/car_1/render1.png" alt="" class="swiper-lazy render_img ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.4s">
                <!--5、顶部定位的主题图-->
                <img src="../../images/template_mob/car_1/theme1.png" alt="" class="swiper-lazy theme_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
                <!--6、footer图 加类名：footerz_img   footer的层级高于主题图-->
                <img src=".../../images/template_mob/car_1/footer1.png" alt="" class="swiper-lazy footer_img ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.1s">
                <!--8、底部定位主题图（class="themebot_img"）-->
                <img src="../../images/template_mob/car_1/theme1.png" alt="" class="swiper-lazy themebot_img ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
            </div>
            <!--第二屏  学校的邀请函-->
            <!--1、背景图-->
            <div class="swiper-slide pub_invi swiper-lazy" data-background="../../images/template_mob/car_1/back2.png">
                <!--2、幼儿园名称的位置（class="invi_title"）  默认的颜色为白色；
                加class="invi_titleblack"；字体为黑色
                加class="invi_goose";咏鹅字体颜色的变化
                -->
                <div  id="kinder_name" class="invi_title ani" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
                    <p>***幼儿园 & ***4s</p>
                    <p>邀您和宝贝一起参加</p>
                </div>
                <!--3、模板主标题图片的位置的位置（class="title_img"）-->
                <img src="../../images/template_mob/car_1/title2.png" alt="" class="swiper-lazy title_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s">
                <!--4、主题图-->
                <img src="../../images/template_mob/car_1/theme2.png" alt="" class="swiper-lazy theme2_img theme3_img ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">
                <!--5、footertu 图-->
                <img src="../../images/template_mob/car_1/footer2.png" alt="" class="swiper-lazy footer_img ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.1s">
                <!--6、渲染-->
                <img src="../../images/template_mob/car_1/render2.png" alt="" class="swiper-lazy render2_img ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
            </div>
            <!--第三屏   活动介绍-->
            <!--1、背景图-->
            <div class="swiper-slide pub_intr swiper-lazy" data-background="../../images/template_mob/car_1/back3.png">
                <!--ride_list 默认的里顶部的距离为60/37.5rem -->
                <ul class="ride_list">
                    <li class="intr_pad">
                        <!--2、第一组标题（class="pad_title"）
                           默认的颜色为白色，左对齐，第一行的字体加大；加class="intr_padsma"；字体为白色，居中对齐；
                           加class="intr_padsmaleft"；字体为白色，左对齐，
                           加class="intr_padsmacol"；字体为黑色，左对齐 ，
                           加class="intr_top"，往上移动30个像素
                           加class="intr_topcolor"，地球只有一个的字体颜色
                           -->
                        <div class="pad_title intr_padsmaleft ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
                            <p>一起创意福字拼写</p>
                        </div>
                        <!--3、第一组 图片的位置（class="illu"）-->
                        <img src="../../images/template_mob/car_1/list1.png" alt="" class="swiper-lazy illu ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
                    </li>
                    <li class="intr_pad">
                        <!--4、第二组标题（class="pad_title"）
                           默认的颜色为白色，左对齐，第一行的字体加大；加class="intr_padsma"；字体为白色，居中对齐；
                           加class="intr_padsmaleft"；字体为白色，左对齐，
                           加class="intr_padsmacol"；字体为黑色，左对齐 ，-->
                        <div class="pad_title intr_padsmaleft ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.7s">
                            <p>一起创意福字拼写</p>
                        </div>
                        <!--5、第二组 图片的位置（class="illu"） 加 class="intr_martop" 图片距离顶部加开距离-->
                        <img src="../../images/template_mob/car_1/list2.png" alt="" class="swiper-lazy illu ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.7s">
                    </li>
                    <li class="intr_pad">
                        <!--6、第三组标题（class="pad_title"）
                           默认的颜色为白色，左对齐，第一行的字体加大；加class="intr_padsma"；字体为白色，居中对齐；
                           加class="intr_padsmaleft"；字体为白色，
                           左对齐，加class="intr_padsmacol"；字体为黑色，左对齐 ，-->
                        <div class="pad_title intr_padsmaleft ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s">
                            <p>一起创意福字拼写</p>
                        </div>
                        <!--7、第三组 图片的位置（class="illu"）-->
                        <img src="../../images/template_mob/car_1/list3.png" alt="" class="swiper-lazy illu ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s">
                    </li>
                </ul>
                <!--主题图的位置（class="snowfooter_img"-->
                <img src="../../images/template_mob/car_1/footer3.png" alt="" class="swiper-lazy snowfooter_img ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="0.8s" swiper-animate-delay="0.1s">
            </div>
            <!--第四屏  活动信息-->
            <!--1、背景图-->
            <div class="swiper-slide pub_mess my_mess swiper-lazy" data-background="../../images/template_mob/car_1/back4.png" >
                <!--2、标题位置点（内容：活动信息）  默认的字体颜色为白色，加class="mess_titleblack"，字体为黑色-->
                <h3 class="mess_title">活动信息<span>ACTIVITY INFORMATION</span></h3>
                <ul class="mess_list">
                    <li>
                        <div class="clearfix list ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.1s">
                            <img src="../../images/icon/time_2.png" alt="" class="timeimg fl">
                            <h4 class="mess_time fl">时间<span>&nbsp;TIME</span></h4>
                        </div>
                        <div class="time_num clearfix ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">
                            <span id="year_num">2018-01-23 周二 上午 01:30:00</span>&nbsp;<span class="time_p" style="display:none">01:30</span>
                        </div>
                    </li>
                    <li>
                        <div class="clearfix list ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
                            <img src="../../images/icon/add_2.png" alt="" class="mess_address fl">
                            <h4 class="mess_time fl">地点<span>&nbsp;PLACE</span></h4>
                        </div>
                        <div class="time_num address ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.4s">
                            <span id="address">北京市 市辖区 海淀区</span>
                            <span id="add_1">18号互联网教育创新中心B座</span>
                        </div>
                    </li>
                    <li>
                        <div class="clearfix list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s">
                            <img src="../../images/icon/tell_2.png" alt="" class="timeimg fl">
                            <h4 class="mess_time fl">咨询电话<span>&nbsp;CONSULTING PHONE</span></h4>
                        </div>
                        <p  id="tell_num" class="time_num ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.6s">010 - 12345678</p>
                    </li>
                </ul>
                <!--3、导语的位置点（class="mess_bot"）  默认的字体颜色为白色，加class="mess_botblack"，字体为黑色-->
                <div class="mess_bot ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.8s" swiper-animate-delay="0.4s">
                    <!--4、年龄段的位置点（class="bot_span"） 包含在导语里面，主要修改年龄段的不同-->
                    如果宝宝的 <span class="bot_span"><p>年龄在2—5岁</p></span>，那赶紧报名吧！<br>
                    <!--5、家庭组数的位置点（例如：只限20组家庭，手慢无！）-->
                    <p>只限20组家庭，手慢无！</p>
                    报名后，老师会跟你联系哦！
                </div>
            </div>
            <!--第五屏 用户信息-->
            <!--1、背景图-->
            <div class="swiper-slide pub_user my_mess swiper-lazy" data-background="../../images/template_mob/car_1/back5.png">
                <!--2、标题位置点（内容： 填写信息） 默认的字体颜色为白色，加class="mess_titleblack"，字体为黑色-->
                <h3 class="mess_title">填写信息<span>FILL IN INFORMATION</span></h3>
                <ul class="mess_list">
                    <li class="baby_name ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.2s">
                        <p class="baby">宝宝姓名</p>
                        <input type="text" class="baby_input">
                    </li>
                    <li class="baby_name ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s" id="messDate">
                        <p class="baby">宝宝出生年月日</p>
                        <span class="baby_input nickInput" id="nickSpan"></span>
                    </li>
                    <li class="baby_name ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.4s">
                        <p class="baby">家长联系方式</p>
                        <input type="tel" class="baby_input">
                    </li>
                    <li class="tell_num ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s">
                        <input type="tel" placeholder="请输入手机验证码" class="baby_input" id="j_phone">
                        <a href="javascript:void (0)" class="obtain_code" id="j_getVerifyCode">获取验证码</a>
                    </li>
                    <p class="cord_error">验证码输入错误</p>
                </ul>
                <a href="#" class="sub_btn ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.7s">提交</a>
            </div>
        </div>

        <footer class="footer_activ slide_footer">
            <!--创建活动底部(只有活动介绍和购买按钮)-->
            <ul class="footer_ul clearfix">
                <li class="silde_nav intr_ribor intr_nav">
                    <a href="javascript:void (0);">活动介绍</a>
                </li>
                <li class="silde_nav intr_ribor freedui_nav">
                    <a href="javascript:void (0);">免费兑换</a>
                </li>
                <li class="silde_nav buy_nav">
                    <a href="javascript:void (0);">付费购买</a>
                </li>
                <!--<li class="silde_nav free_nav">-->
                    <!--<a href="javascript:void (0);">免费试用</a>-->
                <!--</li>-->
            </ul>
            <!--//创建活动底部(指导方案 、 预览 、发送)-->
            <!--<ul class="pro_ul clearfix">-->
                <!--<li class="silde_nav pro_nav">-->
                    <!--<a href="javascript:void (0);">指导方案</a>-->
                <!--</li>-->
                <!--<li class="silde_nav prew_nav">-->
                    <!--<a href="javascript:void (0);">预览</a>-->
                <!--</li>-->
                <!--<li class="silde_nav send_nav send_btn">-->
                    <!--<a href="javascript:void (0);">发送</a>-->
                <!--</li>-->
            <!--</ul>-->
            <!--<ul class="creat_ul clearfix">-->
                <!--<li class="silde_nav intr_nav">-->
                    <!--<a href="javascript:void (0);">活动介绍</a>-->
                <!--</li>-->
                <!--<li class="silde_nav creat_nav">-->
                    <!--<a href="javascript:void (0);">创建宣品</a>-->
                <!--</li>-->
            <!--</ul>-->
        </footer>
    </div>
    <div class="activity_intr">
        <div class="arrbot">
            <img src="../../images/icon/arrbot_icon.png" alt="">
        </div>
        <div class="intr_mess clearfix">
            <img src="../../images/home/fair_1.png" alt="" class="modu_img fl">
            <div class="mess_txt fl">
                <h3 class="rec_title">好玩的喷刷画好玩的喷刷画好玩的喷刷画好玩的喷刷画</h3>
                <p class="activ_text">活动标签：<span>认知体验活动</span></p>
                <p class="activ_txt">适合特色：<span>绘本特色园所</span></p>

                <div class="clearfix">
                    <label class="activi_btn fl">入园体验</label>
                    <a href="#" class="fr free_text">免费试用</a>
                </div>
                <!--<div class="clearfix">-->
                    <!--<p class="moeny_text fr">￥19.9</p>-->
                    <!--<label class="activi_btn fl">入园体验</label>-->
                <!--</div>-->
            </div>
        </div>
        <div class="line_back"></div>
        <ul class="intr_list">
            <li class="intr_li">
                <div class="intr_tit clearfix">
                    <span class="fl line_sp"></span>
                    <h3 class="fl title_h">活动介绍</h3>
                </div>
                <div class="intr_text">
                    <p>
                        通过系列活动：20本绘本，塑造幼儿一生好品格；公益绘本借阅活动；每日亲子阅读打卡活动；绘本故事公益小讲堂活动，给幼儿创造良好的阅读环境。我们知道绘本本身分成许多类型，可以作为孩子学习的一种工具，而且并不是用一种很生硬的方式使孩子记忆，而是透过巧妙的文字叙述或图像引领，使孩子对未知的世界有了最初步的认识。
                    </p>
                </div>
            </li>
            <li class="intr_li">
                <div class="intr_tit clearfix">
                    <span class="fl line_sp"></span>
                    <h3 class="fl title_h">活动流程</h3>
                </div>
                <div class="intr_text">
                    <p>
                        1.宣读倡议书 <br>
                        2.开场舞展示<br>
                        3.介绍系列活动各环节<br>
                        4.20本绘本阅读活动<br>
                    </p>
                </div>
            </li>
            <li class="intr_li">
                <div class="intr_tit clearfix">
                    <span class="fl line_sp"></span>
                    <h3 class="fl title_h">目标人群</h3>
                </div>
                <div class="intr_text">
                    <p>
                        2岁以上 20—30组家庭
                    </p>
                </div>
            </li>
            <li class="intr_li intr_nobor">
                <div class="intr_tit clearfix">
                    <span class="fl line_sp"></span>
                    <h3 class="fl title_h">材料准备</h3>
                </div>
                <div class="intr_text">
                    <p>
                        20本绘本
                    </p>
                </div>
            </li>
        </ul>
        <div class="line_back"></div>
        <div class="more_content">
            <div class="cont_region">
                <h3 class="region_tit">更多内容</h3>
                <ul class="region_ul clearfix">
                    <li>
                        <img src="../../images/icon/pro_icon.png" alt="" class="region_img">
                        <p class="region_txt">指导方案</p>
                    </li>
                    <li>
                        <img src="../../images/icon/mou_icon.png" alt="" class="region_img">
                        <p class="region_txt">创建宣品</p>
                    </li>
                </ul>
            </div>
        </div>
        <footer class="buy_btn">
           <div class="buy_div">
               <a href="javascript:void (0);" class="free_buy">免费兑换</a>
               <a href="javascript:void (0);" class="buy">付费购买</a>
           </div>
        </footer>
        <footer class="buyFree_btn">
           <ul class="buyFree_ul">
               <li class="buy_li">
                   <a href="javascript:void (0);" class="buy">免费试用</a>
               </li>
               <li class="free_li">
                   <a href="javascript:void (0);" class="free">付费购买</a>
               </li>
           </ul>
        </footer>
    </div>
</div>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/swiper-3.4.2.min.js"></script>
<script src="../../js/jquery.lazyload.js"></script>
<script src="../../js/swiper.animate1.0.2.min.js"></script>
<script src="../../js/jweixin-1.0.0.js"></script>
<script src="../../js/swiperWx.js"></script>
<!--<script src="../../js/wxActivity.js"></script>-->
<script>
    $(function () {
        $(".freedui_nav").click(function () {
            $(".freeexchange").show();
        })
        $(".think_li").click(function () {
            $(".freeexchange").hide()
        })
    })
    document.addEventListener('DOMContentLoaded', function () {
        function audioAutoPlay() {
            $(".playBtn").addClass("pause").removeClass("play");
            var audio = document.getElementById('bg-music');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                $(".playBtn").addClass("pause").removeClass("play");
                audio.play();
            }, false);
        }
        audioAutoPlay();
        var patnimg1 = "../../images/icon/music_puase.png";
        var patnimg2 = "../../images/icon/music_play.png";
        $(".playBtn").click(function() {
            if($(this).hasClass("play")) {
                $(this).addClass("pause").removeClass("play");
                $(".playBtn img").attr("src",patnimg2);
                document.getElementById('bg-music').play();
            }
            else {
                $(this).addClass("play").removeClass("pause");
                $(".playBtn img").attr("src",patnimg1);
                document.getElementById('bg-music').pause();
            }
        })
    });
    $(function () {
        $(".send_btn").click(function () {
            $(this).addClass("send_navgray");
            $(".datermine").show();
        })
        $(".close_btn").click(function () {
            $(".send_btn").removeClass("send_navgray");
            $(".datermine").hide();
        })
        $(".intr_nav").click(function () {
            $(".creat_page").hide();
            $(".activity_intr").animate(
                    {top:"0"},300
            );
            $(".buy_btn").show(600);
            $(".footer_activ").hide();
            document.getElementById('bg-music').pause();
        })
        $(".arrbot").click(function () {
            $(".creat_page").show();
            $(".activity_intr").animate(
                    {top:"100%"},500
            );
            $(".buy_btn").hide();
            $(".slide_footer").show();
            document.getElementById('bg-music').play();
        })
    });
</script>

<script>
    $(function() {
        var newStyle = $("<style> @font-face {font-family: 'myFont';  src: url('../../fonts/HYQiHei-50S.ttf');} </style>");
        $('body').append(newStyle);
    });
</script>
</body>
</html>